import React, { Component } from 'react';
import { connect } from 'dva';
import { FormInstance } from 'antd/lib/form';
import PropTypes from 'prop-types';
import router from 'umi/router';
import {
  Button,
  message,
  Input,
  Select,
  Row,
  Col,
  Form,
  Card,
  Checkbox,
  Divider,
  Popconfirm,
  Upload,
  Spin,
} from 'antd';
import styles from './index.less';
import commonFormStyles from '../../../components/common/PateoSearchForm/style.less';
import Ellipsis from '@/components/Ellipsis';
import { transferOption } from '@/support/utils';
import { UploadOutlined, FileZipOutlined, FileImageOutlined } from '@ant-design/icons';
import { getToken, getMd5 } from '@/utils/utils';
import AppImgConfig from './appImgConfig'
import { getOptAuthHeaders } from '@/utils/common';

const FormItem = Form.Item;
const { TextArea } = Input;
const CheckboxGroup = Checkbox.Group;

const mapStateToProps = (state: any) => ({
  appPicsConfig: state.appPicsConfig,
  loading: state.loading.models['appPicsConfig'],
  menu: state.menu,
});
class appPicsConfigEdit extends Component<any, any> {
  formRef = React.createRef<FormInstance>();
  static contextTypes = {
    dicData: PropTypes.array,
  };
  state = {
    query: {},
    sid: null,
    detail: {},
    buttonLoading: false,
    seriesOptions: [],
    vehicleTypeOptions: [],
    vehicleSeriesName: null,
    vehicleTypeGroupName: null,
    indeterminate: false,
    checkAll: false,
    checkedList: [],
    colorsOptions: [],  //  颜色配置
    fileList: [],
    isSpin: true,
    vehicleColorList: [],
    currentSeriesCode: '',
    treeData: [], //  app功能配置
    newColorsOptions: [],
    brandOptions: [],
    brandId: '',
  };
  componentWillMount() {
    if (this.props.location && this.props.location.state) {
      this.setState({
        brandOptions:this.props.location.state.brandOption,
        brandId: this.props.location.state.brandId,
      });
    }
  }
  componentDidMount() {
    const data = JSON.parse(sessionStorage.getItem('appPicsConfigData') || '{}');
    const brandId = this.props.location && this.props.location.state.brandId;
    this.setState(
      {
        sid: data?.sid,
      },
      () => {
        Promise.all([
          this.getSeriesData(brandId),
          this.getVehicleTypeData(data?.vehicleSeriesId),
          this.getColorByTypeGroup(data?.vehicleTypeGroupId),
        ])
          .then(() => {
            this.setState({ isSpin: false });
            const { vehicleTypeOptions } = this.state
            let code = ''
            vehicleTypeOptions.some((item: any)=> {
              const state = item.value == data?.vehicleTypeGroupId
              if (state) {
                code = item.code
              }
              return state
            })
            this.getAppConfigItemsTypeGroup(code).then((res: any) => {
              //  app功能配置数据
              if (res && res.statusCode === '0') {
                this.getDetailNew();
              }
            })
            // this.getDetailNew();
            // this.getDetail();
          })
          .catch(e => {
            this.setState({ isSpin: false });
            this.getDetailNew();
            // this.getDetail();
          });
      },
    );
  }
  /**
   * 获取车系下拉数据
   */
  getSeriesData = (brandId:String) => {
    const { dispatch } = this.props;
    return new Promise((resolve, reject) => {
      dispatch({
        type: 'appPicsConfig/getData',
        payload: {
          url: '/msdevice/base/vehicle/series/bybrand/list',
          brandId
        },
        callback: (resp: any) => {
          if (resp.statusCode == '200' || resp.statusCode == '0') {
            const data = resp.data;
            this.setState(
              {
                seriesOptions: data.map((item: { seriesCode: any; seriesName: any }) => {
                  return {
                    value: item.seriesCode,
                    label: item.seriesName,
                  };
                }),
              },
              () => {
                resolve(resp.data);
              },
            );
          } else {
            reject(resp.statusMessage);
          }
        },
      });
    });
  };

  /**
   * 根据车系 code 获取车型组数据
   */
  getVehicleTypeData = (seriesCode: string) => {
    const { dispatch } = this.props;
    return new Promise((resolve, reject) => {
      dispatch({
        type: 'appPicsConfig/postData',
        payload: {
          url: '/vehicle/group/findBySeriesCode',
          seriesCode,
        },
        callback: (resp: any) => {
          if (resp.statusCode == '200' || resp.statusCode == '0') {
            const data = resp.data;
            this.setState(
              {
                vehicleTypeOptions: data.map((item: any) => {
                  return {
                    value: item.sid,
                    label: item.name,
                    code: item.code
                  };
                }),
              },
              () => {
                resolve(resp.data);
              },
            );
          } else {
            // console.log(resp);
            reject(resp.statusMessage);
          }
        },
      });
    });
  };
  /**
   * 根据车型组 id 获取颜色
   */
  getColorByTypeGroup = (vehicleTypeGroup: string) => {
    const { dispatch } = this.props;
    return new Promise((resolve, reject) => {
      dispatch({
        type: 'appPicsConfig/getData',
        payload: {
          url: '/vehicle/image/findColorByTypeGroup',
          vehicleTypeGroup,
        },
        callback: (resp: any) => {
          if (resp.statusCode == '200' || resp.statusCode == '0') {
            const data = resp.data;
            this.setState(
              {
                colorsOptions: data.map((item: any) => {
                  return {
                    value: item.sid,
                    label: item.name,
                  };
                }),
                newColorsOptions: data
              },
              () => {
                resolve(resp.data);
              },
            );
          } else {
            reject(resp.statusMessage);
          }
        },
      });
    });
  };

  //  根据车型组 code 获取app配置
  getAppConfigItemsTypeGroup= (code: string) => {
    const { dispatch } = this.props;
    return new Promise((resolve, reject) => {
      dispatch({
        type: 'appPicsConfig/getData',
        payload: {
          url: '/vehicle/app/findConfigItemsByTypeGroupCode',
          typeGroupCode: code
        },
        callback: (resp: any) => {
          if (resp.statusCode == '200' || resp.statusCode == '0') {
            const data = resp.data;
            this.setState(
              {
                treeData: data && data.data ? data.data : [],
              },
              () => {
                resolve(resp.data);
              },
            );
          } else {
            reject(resp.statusMessage);
          }
        },
      });
    });
  }

  getDetailNew = () => {
    const { dispatch } = this.props;
    const { sid } = this.state;
    dispatch({
      type: 'appPicsConfig/getData',
      payload: {
        url: `/vehicle/image/v2/findOne`,
        sid,
      },
      callback: (res: any) => {
        const { newColorsOptions, treeData } = this.state
        if (res.statusCode === '0') {
          if (res.data) {
            const { remark, sid, vehicleSeriesId, vehicleSeriesName, vehicleTypeGroupId, vehicleTypeGroupName } = res.data;
            const formVal = {
              sid,
              vehicleSeries: vehicleSeriesId,
              vehicleSeriesName: vehicleSeriesName,
              vehicleTypeGroup: vehicleTypeGroupId + '',
              vehicleTypeGroupName: vehicleTypeGroupName,
              comment: remark,
            };
            this.formRef?.current?.setFieldsValue({ ...formVal });
            this.imgConfigRef?.setConfig(res.data, newColorsOptions, treeData);
          }
        }
      }
    })
  }

  //  重置所选功能、已传图片数据
  handleResetImgData = ()=> {
    this?.imgConfigRef.resetAppImgData();
  }

  //  重置颜色配置、功能结构树数据
  handleResetConfigData = ()=> {
    this?.imgConfigRef.resetConfigData();
  }

  /**\detial */
  getDetail = () => {
    const { dispatch } = this.props;
    const { sid } = this.state;
    dispatch({
      type: 'appPicsConfig/postData',
      payload: {
        url: `/vehicle/image/findOne`,
        sid,
      },
      callback: (response: any) => {
        const detail = response.data;
        this.setState({
          detail,
        });
        const detailColorList = detail?.appPictureConfigEntity.map(item => {
          return {
            overLookImgUrl: item.overlookImageUrl,
            remoteImgUrl: item.remoteImageUrl,
            sideLookImgUrl: item.sideLookImageUrl,
            vehicleColor: item.vehicleColorId,
            vehicleColorName: item.vehicleColorName,
            remoteFileName: item.remoteFileName,
          };
        });
        const formVal = {
          sid: detail?.sid,
          comment: detail?.remark,
          vehicleColorList: detailColorList,
          vehicleSeries: detail?.vehicleSeriesId,
          vehicleTypeGroup: detail?.vehicleTypeGroupId + '',
        };
        this.formRef?.current?.setFieldsValue({ ...formVal });
        const { colorsOptions } = this.state;
        this.setState({
          checkedList: detail?.appPictureConfigEntity.map((item: any) => item.vehicleColorId),
          vehicleColorList: detailColorList,
          indeterminate:
            !!detail?.appPictureConfigEntity.length &&
            detail?.appPictureConfigEntity.length < colorsOptions.length,
          checkAll: detail?.appPictureConfigEntity.length === colorsOptions.length,
        });
      },
    });
  };
  onCheckAllChange = (e: any) => {
    const { colorsOptions, vehicleColorList } = this.state;
    const list = e.target.checked ? colorsOptions.map(item => item.value) : [];
    vehicleColorList.filter(item => {
      return list.indexOf(item.vehicleColor) > 0;
    });
    this.setState({
      checkedList: list,
      indeterminate: false,
      checkAll: e.target.checked,
      vehicleColorList,
    });
    this.formRef.current?.setFieldsValue({
      colorInfo: list,
    });
  };
  onColorChange = (list: any) => {
    const { colorsOptions, vehicleColorList } = this.state;
    // console.log('选中的list', list);
    const newList = list.map(item => {
      const r = vehicleColorList.find(o => {
        return o.vehicleColor == item;
      });
      return (
        r || {
          vehicleColor: item,
          vehicleColorName: colorsOptions.find(opt => opt.value === item)?.label,
        }
      );
    });
    this.setState({
      checkedList: list,
      indeterminate: !!list.length && list.length < colorsOptions.length,
      checkAll: list.length === colorsOptions.length,
      vehicleColorList: newList,
    });
  };
  beforeUpload = (file: any, size: number) => {
    const isImg = size === 5; // 5m-图片 10m-文件
    const isType = isImg
      ? file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
      : file.name.endsWith('.zip');
    if (!isType) {
      message.error(`${isImg ? '只能上传JPG、PNG或GIF图片!' : '只能上传zip文件!'}`);
    }
    const isLt = file.size / 1024 / 1024 < size;
    if (!isLt) {
      message.error(`大小不能大于${size}MB!`);
    }
    return isType && isLt;
  };
  handleChange = (info, colorIdx, type, isRemote = false) => {
    const { colorsOptions } = this.state;
    if (info.file.status === 'done') {
      if (info.file.response && info.file.response.responseCode == '200') {
        message.success('上传成功');
        // 2.读取响应并显示文件链接
        let newUrl = info.file.response?.fileRecordList[0].fileUri;
        const { vehicleColorList, checkedList } = this.state;
        const imgList = vehicleColorList[colorIdx] || {
          vehicleColor: checkedList[colorIdx],
          vehicleColorName: colorsOptions.find(opt => opt.value === checkedList[colorIdx])?.label,
        };
        imgList[type] = newUrl;
        if (isRemote) {
          imgList['remoteFileName'] = info.file.name;
        }
        vehicleColorList[colorIdx] = imgList;
        this.setState({
          fileList: info.file.response.fileRecordList,
          vehicleColorList,
        });
      } else {
        message.error('上传失败');
      }
    } else if (info.file.status === 'error') {
      message.error('文件上传服务器不可用');
    } else if (info.file.status === 'removed') {
      // message.success('图片删除成功');
      // if (maxCount != null && maxCount > 1) {
      //   let newUrl = '';
      //   info.fileList.map((file, index) => {
      //     if (index > 0) {
      //       newUrl = newUrl + ',';
      //     }
      //     if (file.response) {
      //       newUrl = newUrl + file.response.data.fileUrl;
      //     } else {
      //       newUrl = newUrl + file.url;
      //     }
      //     return file;
      //   });
      //   onUploadSuccess(formItem, newUrl);
      // } else {
      //   onUploadSuccess(formItem, '');
      // }
    }
    this.setState({
      fileList: info.fileList,
    });
  };
  renderUploadTemp = () => {
    const { checkedList, colorsOptions, vehicleColorList } = this.state;
    const domain = window.g.url;
    const url = `/vehicle/image/upload?bizType=m18`;
    const str = `${domain}${url}`;
    let md5 = getMd5('bizType=m18')
    return (
      <Row gutter={24}>
        {checkedList.map((colorId, colorIdx) => {
          const currentVehicleColor = vehicleColorList.find(item => item?.vehicleColor == colorId);

          return (
            <Col span={12}>
              <Card
                type="inner"
                title={colorsOptions.find(option => option.value == colorId)?.label}
              >
                <Row>
                  <Col span={8}>
                    <Card
                      type="inner"
                      title="俯视车模图片"
                      cover={
                        currentVehicleColor?.overLookImgUrl ? (
                          <img
                            alt="img"
                            title="俯视车模图片"
                            style={{ height: 150, width: '100%' }}
                            src={currentVehicleColor?.overLookImgUrl}
                            onClick={() => {
                              // this.setState({
                              //   previewVisible: true,
                              //   previewImage: item.themeSmallUrls
                              //     ? item.themeSmallUrls.split(',')[0]
                              //     : null,
                              // })
                            }}
                          />
                        ) : (
                          <FileImageOutlined
                            style={{ height: 150, fontSize: '58px', lineHeight: '150px' }}
                          />
                        )
                      }
                      actions={[
                        <Upload
                          accept="image/*"
                          action={str}
                          showUploadList={false}
                          beforeUpload={e => this.beforeUpload(e, 5)}
                          fileList={this.state.fileList}
                          onChange={e => this.handleChange(e, colorIdx, 'overLookImgUrl')}
                          headers={{ OptAuthorization: `${getToken()}`,...getOptAuthHeaders(), shaSign: md5 }}
                        >
                          <Button>
                            <UploadOutlined />
                          </Button>
                        </Upload>,
                      ]}
                    ></Card>
                  </Col>
                  <Col span={8}>
                    <Card
                      type="inner"
                      title="45°侧视车模图片"
                      cover={
                        currentVehicleColor?.sideLookImgUrl ? (
                          <img
                            alt="img"
                            title="45°侧视车模图片"
                            style={{ height: 150, width: '100%' }}
                            src={currentVehicleColor?.sideLookImgUrl}
                            onClick={() => {
                              // this.setState({
                              //   previewVisible: true,
                              //   previewImage: item.themeSmallUrls
                              //     ? item.themeSmallUrls.split(',')[0]
                              //     : null,
                              // })
                            }}
                          />
                        ) : (
                          <FileImageOutlined
                            style={{ height: 150, fontSize: '58px', lineHeight: '150px' }}
                          />
                        )
                      }
                      actions={[
                        <Upload
                          accept="image/*"
                          action={str}
                          showUploadList={false}
                          beforeUpload={e => this.beforeUpload(e, 5)}
                          fileList={this.state.fileList}
                          onChange={e => this.handleChange(e, colorIdx, 'sideLookImgUrl')}
                          headers={{ OptAuthorization: `${getToken()}`,...getOptAuthHeaders(), shaSign: md5 }}
                        >
                          <Button>
                            <UploadOutlined />
                          </Button>
                        </Upload>,
                      ]}
                    ></Card>
                  </Col>
                  <Col span={8}>
                    <Card
                      type="inner"
                      title="远控图片"
                      cover={
                        currentVehicleColor?.remoteImgUrl ? (
                          // <img
                          //   alt="img"
                          //   title="远控图片"
                          // style={{ height: 150, width: '100%' }}
                          //   src={vehicleColorList[colorIdx]?.remoteImgUrl}
                          // />
                          // <FileZipOutlined
                          //   style={{
                          //     height: 150,
                          //     fontSize: '58px',
                          //     lineHeight: '150px',
                          //     color: '#f9bc0e',
                          //   }}
                          // />
                          <div
                            style={{
                              height: 150,
                              width: '100%',
                              lineHeight: '185px',
                              textAlign: 'center',
                            }}
                          >
                            <div style={{ height: 120 }}>
                              <svg
                                t="1673517346766"
                                class="ali-icon"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="2164"
                                width="60"
                                height="60"
                              >
                                <path
                                  d="M659.72 64.81H270.4c-78.06 0-141.33 63.28-141.33 141.33v612.95c0 78.06 63.28 141.33 141.33 141.33h485.49c78.06 0 141.33-63.28 141.33-141.33V302.3c0-31.83-12.64-62.35-35.15-84.85l-117.5-117.5a120.008 120.008 0 0 0-84.85-35.14z"
                                  fill="#FFC757"
                                  p-id="2165"
                                ></path>
                                <path
                                  d="M304.85 196.81h71.52c7.86 0 14.24-6.38 14.24-14.24v-71.52c0-7.87-6.38-14.24-14.24-14.24h-71.52c-7.86 0-14.24 6.38-14.24 14.24v71.52c0 7.86 6.38 14.24 14.24 14.24zM476.37 196.81h-71.52c-7.86 0-14.24 6.38-14.24 14.24v71.52c0 7.87 6.38 14.24 14.24 14.24h71.52c7.86 0 14.24-6.38 14.24-14.24v-71.52c0-7.86-6.38-14.24-14.24-14.24zM304.85 396.81h71.52c7.86 0 14.24-6.38 14.24-14.24v-71.52c0-7.87-6.38-14.24-14.24-14.24h-71.52c-7.86 0-14.24 6.38-14.24 14.24v71.52c0 7.86 6.38 14.24 14.24 14.24zM476.37 396.81h-71.52c-7.86 0-14.24 6.38-14.24 14.24v71.52c0 7.87 6.38 14.24 14.24 14.24h71.52c7.86 0 14.24-6.38 14.24-14.24v-71.52c0-7.86-6.38-14.24-14.24-14.24zM455.65 552.02H321.52c-17.07 0-30.91 13.84-30.91 30.91v155.48c0 17.07 13.84 30.91 30.91 30.91h134.13c17.07 0 30.91-13.84 30.91-30.91V582.93c0-17.07-13.84-30.91-30.91-30.91z m-4.93 164.59c0 13.72-11.12 24.84-24.84 24.84h-74.6c-13.72 0-24.84-11.12-24.84-24.84v-27.36c0-13.72 11.12-24.84 24.84-24.84h74.6c13.72 0 24.84 11.12 24.84 24.84v27.36zM862.07 217.45l-117.5-117.5a120.001 120.001 0 0 0-61.75-32.9v131.88c0 41.87 33.94 75.81 75.81 75.81H894a120.021 120.021 0 0 0-31.93-57.29z"
                                  fill="#F79F2B"
                                  p-id="2166"
                                ></path>
                                <path
                                  d="M304.85 184.81h71.52c7.86 0 14.24-6.38 14.24-14.24V99.05c0-7.87-6.38-14.24-14.24-14.24h-71.52c-7.86 0-14.24 6.38-14.24 14.24v71.52c0 7.86 6.38 14.24 14.24 14.24zM476.37 184.81h-71.52c-7.86 0-14.24 6.38-14.24 14.24v71.52c0 7.87 6.38 14.24 14.24 14.24h71.52c7.86 0 14.24-6.38 14.24-14.24v-71.52c0-7.86-6.38-14.24-14.24-14.24zM304.85 384.81h71.52c7.86 0 14.24-6.38 14.24-14.24v-71.52c0-7.87-6.38-14.24-14.24-14.24h-71.52c-7.86 0-14.24 6.38-14.24 14.24v71.52c0 7.86 6.38 14.24 14.24 14.24zM476.37 384.81h-71.52c-7.86 0-14.24 6.38-14.24 14.24v71.52c0 7.87 6.38 14.24 14.24 14.24h71.52c7.86 0 14.24-6.38 14.24-14.24v-71.52c0-7.86-6.38-14.24-14.24-14.24zM455.65 540.02H321.52c-17.07 0-30.91 13.84-30.91 30.91v155.48c0 17.07 13.84 30.91 30.91 30.91h134.13c17.07 0 30.91-13.84 30.91-30.91V570.93c0-17.07-13.84-30.91-30.91-30.91z m-4.93 164.59c0 13.72-11.12 24.84-24.84 24.84h-74.6c-13.72 0-24.84-11.12-24.84-24.84v-27.36c0-13.72 11.12-24.84 24.84-24.84h74.6c13.72 0 24.84 11.12 24.84 24.84v27.36z"
                                  fill="#FFFFFF"
                                  p-id="2167"
                                ></path>
                              </svg>
                            </div>
                            <div
                              style={{ display: 'inlien-block', height: 30, lineHeight: '30px' }}
                            >
                              <Ellipsis length={14} tooltip>
                                {currentVehicleColor?.remoteFileName}
                              </Ellipsis>
                            </div>
                          </div>
                        ) : (
                          // <div style={{ height: 150, width: '100%' }}></div>
                          <FileZipOutlined
                            style={{
                              height: 150,
                              fontSize: '58px',
                              lineHeight: '150px',
                            }}
                          />
                        )
                      }
                      actions={[
                        <Upload
                          accept=".zip"
                          action={str}
                          showUploadList={false}
                          beforeUpload={e => this.beforeUpload(e, 10)}
                          fileList={this.state.fileList}
                          onChange={e => this.handleChange(e, colorIdx, 'remoteImgUrl', true)}
                          headers={{ OptAuthorization: `${getToken()}`, ...getOptAuthHeaders(), shaSign: md5 }}
                        >
                          <Button>
                            <UploadOutlined />
                          </Button>
                        </Upload>,
                      ]}
                    ></Card>
                  </Col>
                </Row>
              </Card>
            </Col>
          );
        })}
      </Row>
    );
  };
  renderFormItem = () => {
    const {
      menu: { dicData },
      loading,
    } = this.props;
    const {
      seriesOptions,
      vehicleTypeOptions,
      colorsOptions,
      checkedList,
      indeterminate,
      checkAll,
      currentSeriesCode
    } = this.state;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    return (
      <>
        <Form ref={this.formRef}>
          <Row gutter={24}>
            <Col span={24} key="vehicleSeries">
              <Form.Item name="sid" noStyle>
                <Input type="hidden" />
              </Form.Item>
              <Form.Item name="vehicleSeriesName" noStyle>
                <Input type="hidden" />
              </Form.Item>
              <FormItem  {...formItemLayout}
                name="brandId"
                label="品牌"
                rules={[{ required: false, message: '请选择' }]}
                initialValue={this.state.brandId}
                >
                <Select placeholder="请选择" disabled={true} >
                  {transferOption(this.state.brandOptions, ['brandCode', 'brandName'])}
                </Select>
              </FormItem>
              <FormItem
                {...formItemLayout}
                name="vehicleSeries"
                label="车系"
                rules={[{ required: true, message: '请选择' }]}
              >
                <Select
                  showSearch={false}
                  placeholder="请选择"
                  onChange={(seriesCode: string) => {
                    this.formRef.current?.setFieldsValue({
                      vehicleTypeGroup: null,
                      // colorInfo: null,
                    });
                    let tempName = seriesOptions.find(item => item.value == seriesCode)?.label;
                    this.setState({
                      colorsOptions: [],
                      checkedList: [],
                      vehicleColorList: [],
                      checkAll: false,
                      currentSeriesCode: seriesCode,
                      vehicleSeriesName: tempName,
                    });
                    
                    this.formRef.current?.setFieldsValue({
                      vehicleSeriesName: tempName,
                    });
                    this.getVehicleTypeData(seriesCode);
                    this.handleResetImgData();  //  重置已选功能、上传图片数据
                    this.handleResetConfigData(); //  重置功能、颜色
                  }}
                >
                  {transferOption(seriesOptions)}
                </Select>
              </FormItem>
            </Col>
            <Col span={24} key="vehicleTypeGroup">
              <Form.Item name="vehicleTypeGroupName" noStyle>
                <Input type="hidden" />
              </Form.Item>
              <FormItem
                {...formItemLayout}
                name="vehicleTypeGroup"
                label="车型组"
                rules={[{ required: true, message: '请选择' }]}
              >
                <Select
                  showSearch={false}
                  placeholder="请选择"
                  onChange={(vehicleTypeGroup: string) => {
                    this.formRef.current?.setFieldsValue({
                      colorInfo: null,
                    });
                    let tempName = vehicleTypeOptions.find(
                      item => item.value == vehicleTypeGroup,
                    )?.label;
                    this.setState({
                      colorsOptions: [],
                      checkedList: [],
                      vehicleColorList: [],
                      checkAll: false,
                      vehicleTypeGroupName: tempName,
                    });
                    this.formRef.current?.setFieldsValue({
                      vehicleTypeGroupName: tempName,
                    });
                    this.getAppConfigItemsTypeGroup(vehicleTypeGroup);  //  功能配置
                    this.getColorByTypeGroup(vehicleTypeGroup); //  颜色
                    this.handleResetImgData();  //  重置已选功能、上传图片数据
                  }}
                >
                  {transferOption(vehicleTypeOptions)}
                </Select>
              </FormItem>
            </Col>
            <Col span={24} key="comment">
              <FormItem
                {...formItemLayout}
                name="comment"
                label="备注"
                rules={[{ whitespace: true }]}
              >
                <TextArea rows={4} placeholder="请输入备注" allowClear />
              </FormItem>
            </Col>
            {/* <Col span={24} key="temp">
              <Card title="车身颜色及车模图片配置">
                <Card type="inner" title="车身颜色信息">
                  <FormItem name="colorInfo" key="colorInfo">
                    <Checkbox
                      indeterminate={indeterminate}
                      onChange={this.onCheckAllChange}
                      checked={checkAll}
                    >
                      全选
                    </Checkbox>
                    <Divider />
                    <CheckboxGroup
                      options={colorsOptions}
                      value={checkedList}
                      onChange={this.onColorChange}
                    />
                  </FormItem>
                </Card>
                {this.renderUploadTemp()}
              </Card>
            </Col> */}
            <AppImgConfig onRef={(ref: any) => (this.imgConfigRef = ref)}></AppImgConfig>
            <Col span={24} key="opt">
              <Form.Item>
                <Button type="primary" htmlType="submit" onClick={this.handleOk}>
                  保存
                </Button>

                <Button htmlType="button" style={{ margin: '0 8px' }} onClick={this.onBack}>
                  取消
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </>
    );
  };
  handleOk = () => {
    const { vehicleColorList, sid, seriesOptions, vehicleTypeOptions } = this.state;
    this.formRef.current?.validateFields().then((values: any) => {
      const isImgAll = this?.imgConfigRef.checkAllImg();
      if (!isImgAll) return;
      const vehicleColorList = this?.imgConfigRef.formatVehicleColorList();
      const colorState = this?.imgConfigRef.getColorStatus();
      const postData = {
        ...values,
        vehicleColorList,
        isTypeUniversal: colorState,
      };
      this.setState({
        buttonLoading: true,
      });
      const { dispatch } = this.props;
      dispatch({
        type: 'appPicsConfig/postObj',
        payload: {
          url: '/vehicle/image/v2/update',
          ...postData,
        },
        callback: (resp: any) => {
          if (resp.statusCode === '0') {
            message.success('保存成功！');
            this.onBack();
          } else {
            message.error(resp.statusMessage);
          }
          this.setState({ buttonLoading: false });
        },
      });
    });
  };
  onBack = () => {
    this.formRef.current?.resetFields();
    sessionStorage.removeItem('appPicsConfigData');
    // sessionStorage.removeItem('appPicsConfigData');
    router.push({
      pathname: '/remoteConfiguration/appPicsConfig',state: {sourceRouter: 'appPics'}
    });
  };

  render() {
    const { isSpin } = this.state;

    return (
      <Spin spinning={isSpin}>
        <div className={styles.container}>
          <Card bordered={false}>
            <div className={commonFormStyles.tableListForm}>{this.renderFormItem()}</div>
          </Card>
        </div>
      </Spin>
    );
  }
}

export default connect(mapStateToProps)(appPicsConfigEdit);

